<template>
  <div class="key-customer-content">
    <el-tooltip v-if="!star" :visible="showSetCustomer" class="box-item" effect="light" placement="bottom-start" trigger="click">
      <div class="star not-star-content">
        <svg-icon class="hover-icon" @click="showSetCustomer = true" icon-class="client_start" size="24" />
        <slot name="content"></slot>
      </div>
      <template #content>
        <div class="set-customer">
          <div class="set-customer__title">设置工程重点客户</div>
          <div class="set-customer__textarea" v-loading="isSetCustomerLoading">
            <el-input v-model="keyCustomerContent" style="width: 300px" :rows="3" type="textarea" placeholder="请输入" />
          </div>
        </div>
        <div class="dialog-footer">
          <el-button @click="handleKeyCustomer('cancel')" color="#F2F3F5">取消</el-button>
          <el-button :disabled="isSetCustomerLoading" color="#007DFF" @click="handleKeyCustomer('confirm')">确认 </el-button>
        </div>
      </template>
    </el-tooltip>

    <el-tooltip
      v-if="star"
      class="box-item"
      effect="light"
      placement="bottom-start"
      trigger="hover"
      @hide="attentionMatterLoading = false"
      @show="getAttentionMatterList"
      :popper-options="{
        modifiers: [
          { name: 'preventOverflow', options: { boundary: 'viewport' } },
          { name: 'flip', options: { fallbackPlacements: ['bottom', 'right', 'left'] } }
        ]
      }"
    >
      <div class="star">
        <svg-icon icon-class="client_start_active" size="24" />
        <slot name="content"></slot>
      </div>
      <template #content>
        <div class="attention-matter">
          <div class="attention-matter__head">
            <div class="title">重点关注事项</div>
            <div class="action-btn">
              <span class="action-btn__item" @click="showAddMatter = true">添加关注事项</span>
              <span class="action-btn__item" @click="handleCancelAttention">取消关注</span>
            </div>
          </div>
          <div class="attention-matter__list" v-loading="attentionMatterLoading">
            <div class="matter-item" v-for="item in attentionMatterList" :key="item.id">
              <AvatarView
                :info="item"
                avatarName="submitUser"
                urlField="avatar"
                :avatarStyle="{ width: '32px', height: '32px', borderRadius: '50%', flexShrink: '0' }"
              />
              <div class="matter-detail">
                <div class="matter-detail__top">
                  <span class="name">{{ item.submitUser }}</span>
                  <span class="time">{{ item.submitDate }}</span>
                </div>
                <div class="matter-detail__bottom">
                  {{ item.remark ? item.remark : "暂无数据" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-tooltip>

    <!--  start 添加关注事项-->
    <el-dialog
      v-model="showAddMatter"
      append-to-body
      width="450"
      style="padding: 0 !important"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="attention-matter">
        <div class="attention-matter__head">
          <div class="title">重点关注事项</div>
        </div>
        <div class="attention-matter__list" v-loading="addLoading">
          <div class="matter-item" v-for="item in attentionMatterList" :key="item.id">
            <AvatarView
              :info="item"
              avatarName="submitUser"
              urlField="avatar"
              :avatarStyle="{ width: '32px', height: '32px', borderRadius: '50%', flexShrink: '0' }"
            />
            <div class="matter-detail">
              <div class="matter-detail__top">
                <span class="name">{{ item.submitUser }}</span>
                <span class="time">{{ item.submitDate }}</span>
              </div>
              <div class="matter-detail__bottom">
                {{ item.remark ? item.remark : "暂无数据" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-input v-model="addMatterVal" placeholder="请输入"></el-input>
          <el-button color="#F2F3F5" @click="handleAddMatter('cancel')">取消</el-button>
          <el-button color="#007DFF" @click="handleAddMatter('confirm')">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  end 添加关注事项-->
  </div>
</template>
<script setup>
import { getCurrentInstance, nextTick, ref, unref, watch } from "vue";
import { setKeyCustomer, getAttentionMatter, cancelAttention } from "@/apis/engineeringManage/index";
import AvatarView from "@/components/AvatarView";

const { proxy } = getCurrentInstance();

const emit = defineEmits(["setKeyCustomerSave"]);

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {}
  },
  itemIndex: {
    type: Number,
    default: -1
  }
});
const customerId = props.rowData.customerId ?? "";
const star = ref(false);
watch(
  () => props.rowData,
  newVal => {
    star.value = newVal.star ?? false;
  },
  { immediate: true, deep: true }
);

/**
 * 设置重点客户
 */
const showSetCustomer = ref(false);
const keyCustomerContent = ref("");
const isSetCustomerLoading = ref(false);
const handleKeyCustomer = async type => {
  if (type === "confirm") {
    showSetCustomer.value = true;
    isSetCustomerLoading.value = true;
    await setKeyCustomer({ customerId, remark: keyCustomerContent.value });
    showSetCustomer.value = false;
    star.value = true;
    keyCustomerContent.value = "";
    isSetCustomerLoading.value = false;
    proxy.$modal.msgSuccess("重点客户设置成功");
    emit("setKeyCustomerSave");
  } else {
    keyCustomerContent.value = "";
    isSetCustomerLoading.value = false;
    showSetCustomer.value = false;
  }
};
const iconHover = () => {
  showSetCustomer.value = true;
};

/**
 * 重点关注事项
 */
const attentionMatterList = ref([]);
const attentionMatterLoading = ref(false);
const getAttentionMatterList = async () => {
  attentionMatterLoading.value = true;
  const { data } = await getAttentionMatter(customerId);
  attentionMatterList.value = data ?? [];
  attentionMatterLoading.value = false;
};

/**
 * 新增重点关注事项
 */

const showAddMatter = ref(false);
const addMatterVal = ref("");
const addLoading = ref(false);
const handleAddMatter = async type => {
  if (type === "confirm") {
    addLoading.value = true;
    await setKeyCustomer({ customerId, remark: addMatterVal.value });
    addLoading.value = false;
    proxy.$modal.msgSuccess("重点关注事项添加成功");
  }
  addMatterVal.value = "";
  showAddMatter.value = false;
  emit("setKeyCustomerSave");
};

/**
 * 取消关注
 */
const handleCancelAttention = async () => {
  await cancelAttention(customerId);
  star.value = false;
  proxy.$modal.msgSuccess("已取消重点关注");
  emit("setKeyCustomerSave");
};
</script>

<style scoped lang="scss">
@import "index";
</style>
